<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <title>简易选项卡</title>
<style>
   body{
       /*12号文字，1.5倍行高， Tahoma无衬线字体*/
       font: 12px/1.5 Tahoma;
   }    
   #outer{
       width: 400px;
       margin: 0 auto;
       font-size: 14px;
   }
   #tab{
       margin: 0;
       padding: 0;
       overflow: hidden;
       background-color: #000;
       border: 1px solid #333;
   }
   #tab li{
       float: left;
       color: white;
       width: 80px;
       height: 30px;
       list-style: none;
       line-height: 30px;
       text-align: center;
       cursor: pointer;
   }
   #tab li.current{
			background-color: lightgray;
			color: black;
		}
		#content{
			border: 1px solid #000;
			border-top: none;
            width: 400px;
            margin: 0 auto;
		}
		#content ul{
			margin: 0 30px;
			padding: 10px 0;
			line-height: 200%;
			display: none;
		}
		#content ul:first-child{
			display: block;
		}
</style>    
</head>
<body>
      <div id="outer">
          <ul id="tab">
              <li class="current">新闻</li>
              <li>电影</li>
              <li>体育</li>
          </ul>
      </div> 
      <div id="content">
          <!--(ul>li*3)*3-->
          <ul>
              <li>新闻1</li>
              <li>新闻1</li>
              <li>新闻1</li>
          </ul>
          <ul>
              <li>电影1</li>
              <li>电影2</li>
              <li>电影3</li>
              <li>电影4</li>
              <li>电影5</li>
          </ul>
          <ul>
              <li>体育1</li>
              <li>体育2</li>
              <li>体育3</li>
              <li>体育4</li>
              <li>体育5</li>
              <li>体育6</li>
              <li>体育7</li>
              <li>体育8</li>
              <li>体育9</li>
          </ul>
      </div> 
</body>
<html>
<script>
window.onload = function () {
	var lis = document.querySelector('#tab').querySelectorAll('li');
	var uls = document.querySelector('#content').querySelectorAll('ul');
	for (var i = 0; i < lis.length; i++) {
		// 记录当前li标签的索引值
		lis[i].index = i;
		lis[i].onmouseover = function () {
			// 先移除所有li标签的类名，再给鼠标经过的li标签添加类名
			for (var i = 0; i < lis.length; i++) {
				lis[i].className = '';
			}
			// 给鼠标经过的li标签添加类名
			this.className = 'current';
			// 先让所有的ul隐藏，再让指定索引的ul显现
			for (var i = 0; i < uls.length; i++) {
				uls[i].style.display = 'none';
			}
			uls[this.index].style.display = 'block';
		}
	}
}


</script>